<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">添加</el-button>
        </div>
      </template>

      <el-table
        :data="pageData.data"
        stripe
        style="width: 100%"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        default-expand-all
      >
        <el-table-column prop="modelName" label="模型名称"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="操作" fixed="right" width="350px">
          <template #default="{ row }">
            <el-button link type="primary" icon="plus" @click="pageActions.handleAdd({ parentId: row.id })">
              新增
            </el-button>
            <el-button link type="primary" icon="edit" @click="pageActions.handleEdit(row)"> 编辑 </el-button>

            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      ></el-pagination>
    </template>

    <!-- 新增/编辑 -->
    <ModelEdit
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      @submit="pageActions.handleSubmit()"
    ></ModelEdit>
  </app-page>
</template>

<script setup>
import { http, usePageList } from 'jax-node'
import ModelEdit from './components/ModelEdit.vue'

const { pageData, pageActions } = usePageList({
  defaultDetail: {
    modelSchema: [],
  },
})

pageActions.getData = () => {
  return http({
    url: '/model/tree',
  }).then(res => {
    pageData.data = res
  })
}
</script>
